<template>
  <div class="map-icons absolute column items-center q-gutter-y-sm">
    <q-btn class="map-icons-search" icon="saved_search" v-bind="btnAttrs">
      <q-popup-proxy :offset="[3, 3]" anchor="center left" breakpoint="0" self="center right"
                     transition-hide="jump-right" transition-show="jump-left">
        <div class="map-search-box row justify-center items-center text-grey-7">
          <input v-model="searchPoint" :placeholder="$t('MapCore.SearchPointTip1')" autofocus
                 class="start-search-input full-width" @keydown.enter="startSearch">
        </div>
      </q-popup-proxy>
      <q-tooltip anchor="bottom end" self="top end" v-bind="$tooltipAttr" v-bind:offset="[0, 5]">
        {{ $t('MapCore.SearchPointTip2') }}
      </q-tooltip>
    </q-btn>
    <q-btn v-if="false" class="map-icons-search" icon="manage_search" v-bind="btnAttrs">
      <q-popup-proxy :offset="[3, 3]" anchor="center left" breakpoint="0" self="center right"
                     transition-hide="jump-right" transition-show="jump-left">
        <div class="map-search-box row justify-center items-center text-grey-7">
          <input v-model="searchLine" :placeholder="$t('MapCore.SearchLineTip1')" autofocus
                 class="start-search-input full-width" @keydown.enter="startSearchLine">
        </div>
      </q-popup-proxy>
      <q-tooltip anchor="bottom end" self="top end" v-bind="$tooltipAttr" v-bind:offset="[0, 5]">
        {{ $t('MapCore.SearchLineTip2') }}
      </q-tooltip>
    </q-btn>
    <q-btn class="map-icons-info" icon="mdi-layers-triple-outline" v-bind="btnAttrs">
      <q-popup-proxy :offset="[8, 0]" anchor="bottom left" breakpoint="0" class="q-pt-sm q-pb-sm" self="bottom right"
                     transition-hide="jump-right" transition-show="jump-left">
        <q-item v-for="(value, key) in groupToolsBar" :key="key">
          <q-checkbox v-model="groupToolsBar[key]" :class="value ? 'text-primary' : 'text-strike text-grey-5'"
                      :label="formatLabel(key)" checked-icon="mdi-eye-outline" dense
                      unchecked-icon="mdi-eye-off-outline" @update:model-value="updateGroupVisible(key, value)" />
        </q-item>
      </q-popup-proxy>
    </q-btn>
    <q-btn class="map-icons-scale text-bold" v-bind="btnAttrs" @click="restoreInit">
      1:1
    </q-btn>
  </div>
</template>

<script setup>
import { layerNames } from 'src/views/MapCore/enum.js'
import { exportAttrs, resetCanvas } from 'src/views/MapCore/MapGlobal/utils/KonvaEvent.js'
import {
  groupToolsBar, handleSelectedLines, handleSelectedPoints, initZoomCanvas, zoomCanvasByFindPoint
} from 'src/views/MapCore/MapGlobal/utils/MouseEvent.js'
import {
  searchLineByCode, searchPointByCodeOrName, searchPointByCoord
} from 'src/views/MapCore/MapGlobal/utils/utils.js'
import { ref } from 'vue'

const searchLine = ref('')
const searchPoint = ref('')
const btnAttrs = { color: 'white', padding: 'none', textColor: 'dark' }

const formatLabel = key => (layerNames.value || {})[key] || key
const startSearch = () => {
  if (!searchPoint.value) return
  const { batchSelected = [], CANVAS } = exportAttrs()
  if (!CANVAS) return
  const pointLayers = CANVAS.find('.points')
  if (!pointLayers.length) return
  const targetPoint = searchPoint.value.includes(',') ? searchPointByCoord(pointLayers, searchPoint.value)
    : searchPointByCodeOrName(pointLayers, searchPoint.value)
  if (!targetPoint) return
  if (batchSelected.length) handleSelectedLines(CANVAS, batchSelected, [])
  batchSelected.splice(0) && batchSelected.push(targetPoint)
  handleSelectedPoints(CANVAS, batchSelected)
  zoomCanvasByFindPoint(CANVAS, targetPoint)
}
const startSearchLine = () => {
  if (!searchLine.value) return
  const { batchSelected = [], CANVAS } = exportAttrs()
  if (!CANVAS) return
  const lineLayers = CANVAS.find('.lines')
  if (!lineLayers.length) return
  const targetLine = searchLineByCode(lineLayers, searchLine.value)
  if (!targetLine) return
  if (batchSelected.length) handleSelectedPoints(CANVAS, batchSelected, true)
  handleSelectedLines(CANVAS, batchSelected, [targetLine])
  batchSelected.splice(0) && batchSelected.push(targetLine)
  const points = targetLine.getAttr('points')
  let [minX, minY] = points, [maxX, maxY] = points.slice(-2)
  minX > maxX && ([minX, maxX] = [maxX, minX])
  minY > maxY && ([minY, maxY] = [maxY, minY])
  initZoomCanvas(CANVAS, { minX, minY, maxX, maxY }, true)
}

const updateGroupVisible = (key, value) => {
  const { CANVAS } = exportAttrs(), groups = CANVAS.find(`.${key}`)
  if (!groups.length) return
  for (const group of groups) {
    const visible = !group.visible()
    if (visible === value) continue
    group.visible(visible)
    if (visible && key === 'points') group.find(el => el.show())
  }
  CANVAS.findOne('.shapeLayer')?.batchDraw?.()
}

const restoreInit = () => {
  const { CANVAS } = exportAttrs(), points = []
  CANVAS.find('.points').forEach(el => points.push(...el.find('Image')))
  resetCanvas({}, points)
}
</script>